<template>
  <div id="app">
    <z-space ref="header" class="change-role">
      <div class="change" @click="changeUser">切换角色</div>
      <div class="current-role">
        <img :src="currentUser.avatar" />
        <span>{{
            currentUser.name + (currentUser.author ? '（作者）' : '（游客）')
          }}</span>
      </div>
    </z-space>
    <div ref="comment" :style="wrapStyle" class="comment-wrap">
      <z-comment
          v-model="data"
          :user="currentUser"
          :before-submit="submit"
          :before-like="like"
          :before-delete="deleteComment"
          :upload-img="uploadImg"
          :props="props"
      ></z-comment>
    </div>
  </div>
</template>

<script>
import { EXAMPLE_DATA } from './data'
export default {
  name: 'App',
  components: {
    Comment,
  },
  data() {
    const users = [
      {
        name: 'Up&Up',
        avatar: require('./assets/image/avatar1.jpg'),
        author: true,
      },
      {
        name: '我叫白云',
        avatar: require('./assets/image/comment.png'),
      },
      {
        name: '我叫黑土',
        avatar: require('./assets/image/avatar3.jpg'),
      },
      {
        name: 'NARUTO',
        avatar: require('./assets/image/avatar2.jpg'),
      },
    ]
    return {
      data: [],
      props: {
        id: '_id',
        content: 'content',
        imgSrc: 'imgSrc',
        children: 'childrenComments',
        likes: 'likes',
        liked: 'liked',
        reply: 'reply',
        createAt: 'createAt',
        user: 'visitor',
      },
      currentUser: users[0],
      users,
      wrapStyle: '',
    }
  },
  created() {
    this.addData(1)
  },
  mounted() {
    const header = this.$refs.header
    this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
  },
  methods: {
    async submit(newComment, parent, add) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve({ newComment, parent })
        }, 300)
      })
      add(Object.assign(res.newComment, { _id: new Date().getTime() }))
      console.log('addComment: ', res)
    },
    async like(comment) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(comment)
        }, 0)
      })
      console.log('likeComment: ', res)
    },
    async uploadImg({ file, callback }) {
      const res = await new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          resolve(reader.result)
        }
        reader.onerror = () => {
          reject(reader.error)
        }
      })
      callback(res)
      console.log('uploadImg： ', res)
    },
    async deleteComment(comment, parent) {
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve({ comment, parent })
        }, 300)
      })
      console.log('deleteComment: ', res)
    },
    changeUser() {
      const users = this.users
      const index = users.findIndex((c) => c.name === this.currentUser.name)
      this.currentUser = users[index === users.length - 1 ? 0 : index + 1]
      this.$refs.comment.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
    },
    addData(times) {
      setTimeout(() => {
        this.data = new Array(times).fill(EXAMPLE_DATA).flat(Infinity)
      }, 0)
    },
  },
}
</script>
